<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <%@ include file="/common/client/header.jsp" %>
    <script src="${ctx}/statics/js/manager/manager.js"></script>
</head>
<body>
<%@ include file="/common/manager/searchBar.jsp" %>
<!--End Header End-->
<div class="i_bg bg_color">
    <!--Begin 用户中心 Begin -->
    <div class="m_content">
        <%@ include file="/common/manager/leftBar.jsp" %>
        <div class="m_right" id="content">
            <div class="mem_tit">分类列表</div>
            <br>
            <table border="0" class="order_tab" style="width:930px; text-align:center; margin-bottom:30px;"
                   cellspacing="0" cellpadding="0">
                <tbody id="trhood">
            </table>
            <div id="addClassify">
                <table border="0" class="add_tab" style="width:930px;" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="135" align="right">分类级别</td>
                        <td colspan="3" style="font-family:'宋体';">
                            <select name="type" style="background-color:#f6f6f6;" id="type">
                                <option value="0" selected="selected">请选择...</option>
                                <option value="1">
                                    一级分类
                                </option>
                                <option value="2">
                                    二级分类
                                </option>
                                <option value="3">
                                    三级分类
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="135" align="right">一级分类</td>
                        <td colspan="3" style="font-family:'宋体';">
                            <select name="classifyLevel1" style="background-color:#f6f6f6;"
                                    id="classifyLevel1" disabled="disabled">
                                <option value="0" selected="selected">请选择...</option>

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="135" align="right">二级分类</td>
                        <td>
                            <select name="classifyLevel2" style="background-color:#f6f6f6;"
                                    id="classifyLevel2" disabled="disabled">
                                <option value="0" selected="selected">请选择...</option>

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">分类名称</td>
                        <td style="font-family:'宋体';">
                            <input type="text" value="" class="add_ipt" id="classifyName"/>（必填）
                            <input type="hidden" name="id" value="" id="id">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p align="left">
                                <br>
                                <a onclick="clickUrl();" class="add_b">返回</a>
                            </p>
                        </td>
                        <td>
                            <p align="right">
                                <br>
                                <a onclick="mySaveUpdate();" class="add_b">确认操作</a>
                            </p>
                        </td>
                    </tr>
                    >
                </table>
                <%--                <p align="right">--%>
                <%--                    <br>--%>
                <%--                    <a onclick="mySaveUpdate();" class="add_b">确认操作</a>--%>
                <%--                </p>--%>
            </div>
        </div>
    </div>
    <%@ include file="/common/client/footer.jsp" %>
</div>
</body>
<script>

    //返回
    function clickUrl() {
        window.location.href = "http://localhost:8080/manager/classify/classifyList.jsp";
    }


    // 17. 定义 mySaveUpdateTwo 函数，用于发送添加分类的 AJAX 请求
    function mySaveUpdateTwo(classname, class1, class2) {
        $.ajax({
            url: "/classUpdata",
            data: {"class1": class1, "class2": class2, "classname": classname}
        }).done(function (data) {
            if (data == "true") {
                // 18. 添加成功后刷新数据并显示消息
                onDocumentReady();
                showMessage("修改成功");
            } else {
                showMessage("修改失败");
            }
        });
    }


    function onDocumentReady() {
        // 3. 发起 AJAX 请求获取数据
        $.ajax({
            url: "/contendisplaytwo",
            method: "GET",
            dataType: "json",
        }).done(function (data) {
            // 4. 初始化一个空的HTML字符串
            var html = "";
            newall = data;
            console.log(data);

            // 5. 将数据分块，每块包含4个数据项
            news = chunk(data, 4);
            console.log(news);

            // 6. 调用 eachAll 函数
            eachAll(position);
        });
    };


    // 14. 定义 mySaveUpdate 函数，用于处理添加分类操作
    function mySaveUpdate() {
        // 15. 获取表单中的值
        var type = document.getElementById("type").value;
        var class1 = document.getElementById("classifyLevel1").value;
        var class2 = document.getElementById("classifyLevel2").value;
        var classname = document.getElementById("classifyName").value;

        console.log(type, class1, class2, classname);

        // 16. 根据分类级别执行相应操作
        if (type == 1) {
            if (classname != "") {
                mySaveUpdateTwo(classname, "0", "1");
            } else {
                showMessage("分类名称不可为空");
            }
        } else if (type == 2) {
            if (classname != "") {
                mySaveUpdateTwo(classname, class1, "2");
            } else {
                showMessage("分类名称不可为空");
            }
        } else if (type == 3) {
            if (classname != "") {
                mySaveUpdateTwo(classname, class2, "3");
            } else {
                showMessage("分类名称不可为空");
            }
        }
    }


    // 9. 从 URL 中获取 id 参数
    function getId() {
        let query = window.location.search;
        var idValue = query.split('?id=')[1];
        console.log("url地址后的值" + query);
        console.log("idValue" + idValue);

        if (idValue === null) {
            return null;
        } else {

            return idValue;
        }
    };


    // 1. 在页面加载完成后执行的函数
    window.onload = function () {
        // 2. 获取 URL 参数中的 id
        var id = getId();

        if (id === null || id === undefined) {
            // 3. 如果 id 不存在或未定义，执行 onDocumentReady 函数，并显示"商品上架"按钮
        } else {
            // 4. 如果 id 存在，执行 selectClassify 函数，获取商品数据
            selectClassify(id, function (data) {
                console.log(data);
                // 在这里处理获取到的数据
            });
        }
    };

    // 5. 发起 AJAX 请求获取商品数据
    function selectClassify(id) {
        $.ajax({
            url: "/myselectclassifyservice?id=" + id,
            method: "GET",
            dataType: "json",
        }).done(function (data) {
            // 6. 处理获取到的商品数据
            disposeGoods(data);
        });
    };

    // 21. 获取分类级别的选择框元素
    var classifyLevel1Element = document.getElementById("classifyLevel1");
    var classifyLevel2Element = document.getElementById("classifyLevel2");
    var elementById = document.getElementById("type");

    // 7. 处理商品数据
    function disposeGoods(data) {
        // 获取元素
        var element = document.getElementById('type');
        if (data.type == 1) {
            // 如果data.type等于1，执行以下代码
            // 更改元素的innerHTML为一级分类
            element.innerHTML = '<td colspan="3" style="font-family:\'宋体\';">' +
                '<select name="type" style="background-color:#f6f6f6;" id="type">' +
                '<option value="0" >请选择...</option>' +
                '<option value="1"  selected="selected">一级分类</option>' +
                '<option value="2">二级分类</option>' +
                '<option value="3">三级分类</option>' +
                '</select>' +
                '</td>';

            setGoodsName(data.classify_name);
        } else if (data.type == 2) {
            // 如果data.type等于2，执行以下代码
            // 更改元素的innerHTML为二级分类
            element.innerHTML = '<td colspan="3" style="font-family:\'宋体\';">' +
                '<select name="type" style="background-color:#f6f6f6;" id="type">' +
                '<option value="0">请选择...</option>' +
                '<option value="1">一级分类</option>' +
                '<option value="2" selected="selected">二级分类</option>' +
                '<option value="3">三级分类</option>' +
                '</select>' +
                '</td>';

            setGoodsName(data.classify_name);
        } else if (data.type == 3) {
            // 如果data.type等于3，执行以下代码
            // 更改元素的innerHTML为三级分类
            element.innerHTML = '<td colspan="3" style="font-family:\'宋体\';">' +
                '<select name="type" style="background-color:#f6f6f6;" id="type">' +
                '<option value="0">请选择...</option>' +
                '<option value="1">一级分类</option>' +
                '<option value="2">二级分类</option>' +
                '<option value="3" selected="selected">三级分类</option>' +
                '</select>' +
                '</td>';

            setGoodsName(data.classify_name);
        }


    }

    function setGoodsName(data) {
        console.log(data)
        document.querySelector("#classifyName").value = data;
        onDocumentReadyTWO;
        onn();


    }


    // 22. 监听分类级别选择框的值变化
    function onn() {
        document.querySelector("#type").addEventListener("change", function () {
            var selectedValue = this.value;
            console.log(selectedValue);

            // 23. 根据不同的分类级别设置分类级别选择框的可用性并重置选项
            classifyLevel1Element.disabled = false;
            classifyLevel2Element.disabled = false;
            classifyLevel1Element.innerHTML = '<option value="0" selected="selected">请选择...</option>';
            classifyLevel2Element.innerHTML = '<option value="0" selected="selected">请选择...</option>';

            if (selectedValue === "2") {
                // 24. 选择一级分类，禁用二级分类选择框
                classifyLevel2Element.disabled = true;
                onDocumentReadyTWO();
            } else if (selectedValue === "3") {
                // 25. 选择二级分类，启用一级和二级分类选择框
                classifyLevel1Element.disabled = false;
                classifyLevel2Element.disabled = false;
                onDocumentReadyTWO();
            } else {
                // 26. 选择其他分类级别，禁用选择框并重置选项
                classifyLevel1Element.disabled = true;
                classifyLevel2Element.disabled = true;
                classifyLevel1Element.innerHTML = '<option value="0" selected="selected">请选择...</option>';
                classifyLevel2Element.innerHTML = '<option value="0" selected="selected">请选择...</option>';
            }
        });
    }

    // 27. 定义处理二级分类选择框变化的函数
    function doSecondAjaxTWO() {
        document.querySelector("#classifyLevel1").addEventListener("change", function () {
            var selectedValue = this.value;

            // 28. 发起 AJAX 请求获取与所选一级分类相关的二级分类数据
            $.ajax({
                url: "/contendisplay?id=2&parent_id=" + selectedValue,
                method: "GET"
            }).done(function (data) {
                let html = "";
                // 29. 遍历数据生成二级分类的选项
                $.each(data, function (index, item) {
                    html += '<option value="' + item.id + '" >' + item.classify_name + '</option>';
                });
                $("#classifyLevel2").html(html);
            });
        });
    }

    // 30. 定义 onDocumentReadyTWO 函数，用于加载分类数据
    function onDocumentReadyTWO() {
        // 31. 发起第一个 AJAX 请求获取一级分类数据
        $.ajax({
            url: "/contendisplay?id=1",
            method: "GET"
        }).done(function (data) {
            dataAll = data;
            let html = "";
            // 32. 遍历数据生成一级分类的选项
            $.each(data, function (index, item) {
                if (item.type == 1) {
                    html += '<option value="' + item.id + '" selected="selected">' + item.classify_name + '</option>';
                }
            });
            $("#classifyLevel1").html(html);
        });

        // 33. 检查二级分类选择框是否已被禁用
        if (classifyLevel2Element.disabled === false) {
            // 34. 处理二级分类选择框的变化
            doSecondAjaxTWO();
        }
    };

</script>
</html>